import 'package:flutter/material.dart';
import 'package:flutterdemo01/UserInfo.dart';

main() {
  runApp(MyApp());
}

//--------------griadview 1--------------

// class MyApp extends StatelessWidget {
//   List<Widget> widgetList = [];
//
//   MyApp() {
//     widgetList = userData.map((e) {
//       return Container(
//         child: Column(
//           children: [
//             Image.network(e['imageUrl']),
//             SizedBox(height: 10,),
//             Text(
//               e['title'],
//               textAlign: TextAlign.center,
//             )
//           ],
//         ),
//
//         // color: Colors.tealAccent,
//         // decoration: BoxDecoration(
//         //     borderRadius: BorderRadius.all(Radius.circular(5)),
//         //     border: Border.all(color: Colors.red),
//         //     color: Colors.tealAccent),
//       );
//     }).toList();
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     print('===build====');
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.tealAccent),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('appbars'),
//         ),
//         body: GridView.count(
//           padding: EdgeInsets.all(10),
//           childAspectRatio: 0.9,//宽高比例
//           crossAxisSpacing: 10,//横向间距
//           mainAxisSpacing: 10, //纵向间距
//           crossAxisCount: 2,//列数
//           children: widgetList,
//         ),
//       ),
//     );
//   }
// }

//--------------griadview 2--------------
//
// class MyApp extends StatelessWidget {
//   List<Widget> _getData() {
//     return userData.map((e) {
//       return Container(
//         child:  Column(
//           children: [
//             Image.network(e['imageUrl']),
//             SizedBox(height: 5,),
//             Text(e['author'], style: TextStyle(fontSize: 16),),
//           ],
//
//         ),
//         decoration: BoxDecoration(
//           borderRadius: BorderRadius.circular(2),
//           border: Border.all(color: Colors.transparent)
//         ),
//       );
//     }).toList();
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.tealAccent),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('title'),
//         ),
//         body: GridView.count(
//           padding: EdgeInsets.all(10),
//             crossAxisSpacing: 10, //行间距
//             mainAxisSpacing: 10,//竖间距
//             children: _getData(),
//             crossAxisCount: 2), //列数
//       ),
//     );
//   }
// }

//--------------griadview 3--------------
//
// class MyApp extends StatelessWidget {
//   Widget _getInfos(context, index) {
//     return Container(
//       child: Column(
//         children: [
//           Image.network(userData[index]['imageUrl']),
//           SizedBox(  height: 10, ),
//           Text(
//             userData[index]['author'],
//           )
//         ],
//       ),
//       color: Colors.red,
//       // padding: EdgeInsets.all(10),
//       // margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
//     );
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.red),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('appbar'),
//         ),
//         body: GridView.builder(
//             itemCount: userData.length,
//
//             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//               crossAxisCount: 2,
//               crossAxisSpacing: 10,
//               mainAxisSpacing: 10,
//             ),
//             itemBuilder: _getInfos),
//       ),
//     );
//   }
// }

//--------------griadview 4+padding --------------

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.greenAccent),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('this is title'),
//         ),
//         body:
//
//         Padding(
//
//             padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
//             child: GridView.builder(
//             itemCount: userData.length,
//             gridDelegate:
//             SliverGridDelegateWithFixedCrossAxisCount(
//                 crossAxisCount: 2,
//                 crossAxisSpacing: 10,
//                 mainAxisSpacing: 10
//             ),
//             itemBuilder: (context, index) {
//               return Image.network(userData[index]['imageUrl'], fit: BoxFit.cover,);
//             }),)
//
//
//       ),
//     );
//   }
// }

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.green),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('自定义组件'),
//         ),
//         body: SelfContent(),
//       ),
//     );
//   }
// }
//
// class SelfContent extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     // return MyView1(Icons.accessibility_new);
//     // return MyView1(Icons.accessibility_new , color: Colors.amber,);
//     return Container(
//       child: Row(
//         children: [
//           MyView1(Icons.accessibility_new),
//           MyView1(
//             Icons.home,
//             color: Colors.purpleAccent,
//           ),
//           MyView1(Icons.add_alert_sharp),
//         ],
//         // mainAxisAlignment: MainAxisAlignment.center,
//         // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//         mainAxisAlignment: MainAxisAlignment.spaceBetween,
//         crossAxisAlignment: CrossAxisAlignment.start,
//       ),
//       height: 300,
//     );
//   }
// }
//

// class MyView1 extends StatelessWidget {
//   Color? color;
//   IconData icon;
//
//   MyView1(this.icon, {this.color = Colors.tealAccent});
//
//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       width: 100,
//       height: 100,
//       color: this.color,
//       child: Icon(
//         this.icon,
//         size: 30,
//         color: Colors.white,
//       ),
//     );
//   }
// }
//
// //-------------- Expanded --------------
//
// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.purpleAccent),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('an appbar'),
//         ),
//         body: Row(
//           children: [
//             Expanded(
//               child: MyView1(Icons.widgets),
//               flex: 1,
//             ),
//             Expanded(
//               child: MyView1(
//                 Icons.accessible_forward,
//                 color: Colors.indigo,
//               ),
//               flex: 3,
//             )
//           ],
//         ),
//       ),
//     );
//   }
// }

//------------demo-----------

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       theme: ThemeData(primaryColor: Colors.yellow),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text('this bar'),
//         ),
//         body: HomeContent(),
//       ),
//     );
//   }
// }
//
// class HomeContent extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return Padding(
//       padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
//       child: Column(
//         children: [
//           Container(
//             height: 180,
//             decoration: BoxDecoration(color: Colors.black),
//             margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
//           ),
//           SizedBox(
//             height: 10,
//           ),
//           Container( child: Row(
//             children: [
//               Expanded(
//                 child: Image.network(
//                   'https://www.itying.com/images/flutter/1.png',
//                   fit: BoxFit.cover,
//                 ),
//                 flex: 2,
//               ),
//               // SizedBox(
//               //   width: 10,
//               // ),
//               Expanded(
//                 child: Column(
//                   children: [
//                     Image.network(
//                       "https://www.itying.com/images/flutter/2.png",
//                       height: 70,
//                     ),
//
//                     SizedBox(height: 10,),
//                     Image.network(
//                       "https://www.itying.com/images/flutter/3.png",
//                       height: 70,
//                     ),
//
//                     // Text('data'),
//                   ],
//                 ),
//                 flex: 1,
//               )
//             ],
//           ),height: 150,)
//
//         ],
//       ),
//     );
//   }
// }

//-----------------------demo again------------------

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.lightBlue),
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 180,
          color: Colors.black,
          margin: EdgeInsets.all(10),
        ),
        Padding(padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
        child: Container(
          child: Row(
            children: [
              Expanded(
                child:Container(
                  child:  Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.cover,
                  ),
                  height: 180,
                ),
                flex: 2,
              ),
              SizedBox(width: 10,),
              Expanded(
                child: Column(
                  children: [
                    Expanded(
                      child: Image.network(
                        'https://www.itying.com/images/flutter/2.png',fit: BoxFit.cover,),
                      flex: 1,
                    ),
                    SizedBox(height: 10,),
                    Expanded(
                      child: Image.network(
                        'https://www.itying.com/images/flutter/3.png',fit: BoxFit.cover,),
                      flex: 1,
                    )
                  ],
                ),
                flex: 1,
              )
            ],
          ),
          height: 180,
        ),)
      ],
    );
  }
}
